<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 商品订单 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.billNumber"
                                placeholder="订单号查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>

                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.memberName"
                                placeholder="会员名查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>

                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.chainStoreName"
                                placeholder="店铺名查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>

                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.chainStoreName"
                                placeholder="店铺名查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-select v-model="query.status" placeholder="--状态查询--" clearable filterable>
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker
                                type="date"
                                placeholder="下单时间"
                                v-model="query.beginTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </div>
                    </el-col>
                    <el-col style="padding: 0px; display: inline; width: 1%; line-height: 1.5">—</el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker type="date" placeholder="下单时间" v-model="query.endTime" style="width: 100%"></el-date-picker>
                        </div>
                    </el-col>

                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-table
                @expand-change="expand"
                :data="tableData"
                v-loading="loading"
                style="width: 100%"
                border
                class="table"
                header-cell-class-name="table-header"
            >
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <template v-for="(item, index) in props.row.orderitems">
                            <el-form label-position="left" inline class="demo-table-expand" v-bind:key="index">
                                <el-form-item label="">
                                    <span>{{ item.name }}</span>
                                </el-form-item>
                                <el-form-item label="">
                                    <span>￥{{ item.price }}</span>
                                </el-form-item>
                                <el-form-item label="">
                                    <span>数量：{{ item.count }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" prop="creationTime"></el-table-column>
                <el-table-column label="订单号" width="200" prop="billNumber"></el-table-column>
                <el-table-column label="订单总额" :formatter="priceFilter" prop="totalPay"></el-table-column>
                <el-table-column label="支付总额" :formatter="priceFilter" prop="totalMoney"></el-table-column>
                <el-table-column label="微信支付" :formatter="priceFilter" prop="wechatPay"></el-table-column>
                <el-table-column label="支付宝支付" :formatter="priceFilter" prop="aliPay"></el-table-column>
                <el-table-column label="余额支付" :formatter="priceFilter" prop="balancePay"></el-table-column>
                <el-table-column label="积分支付" :formatter="priceFilter" prop="integralPay"></el-table-column>
                <el-table-column label="代金券支付" :formatter="priceFilter" prop="couponPay"></el-table-column>
                <el-table-column label="状态" :formatter="statusFilter" prop="status"></el-table-column>
                <el-table-column label="会员名" prop="weChatName"></el-table-column>
                <el-table-column label="会员卡号" prop="cardID"></el-table-column>
                <el-table-column width="200" :show-overflow-tooltip="showtooltip" label="下单门店" prop="name"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            query: {
                billNumber: '',
                status: -2,
                memberName: '',
                chainStoreName: '',
                beginTime: '',
                endTime: '',
                id: 0,
                name: '',
                categoryId: [],
                tenantId: 0,
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            loading: false,
            options: [
                {
                    value: -2,
                    label: '-状态查询-'
                },
                {
                    value: 0,
                    label: '已付款'
                },
                {
                    value: 1,
                    label: '已撤销'
                },
                {
                    value: -1,
                    label: '未支付'
                }
            ],
            value: -1,
            showtooltip: true,
            tableData: [ ]
        };
    },
    created() {
        this.loading = true;

        this.getData();
    },
    methods: {
        handleSearch() {
            this.query.pageIndex = 1;
            this.loading = true;
            this.getData();
        },
        priceFilter(row, column, cellValue, index) {
            return '￥' + cellValue;
        },
        statusFilter(row, column, cellValue, index) {
            var str = '';
            switch (row.status) {
                case 0:
                    str = '已付款';
                    break;
                case 1:
                    str = '已撤销';
                    break;
                case -1:
                    str = '未支付';
                    break;
                default:
                    str = row.state;
                    break;
            }
            return str;
        },
        getData() {
            this.loading = true;
            axios({
                url: config.gatewayUrl + '/comorder/goodsorder/GetPage',
                method: 'post',
                data: this.query
            }).then(async (res) => {
                var list = res.data.list;
                if (list == null || list.length == 0) {
                    this.loading = false;
                    return;
                }

                var orderIds = [];
                for (let i = 0; i < list.length; i++) {
                    orderIds.push(list[i].id);
                }
                var items = await this.getOrderItems(orderIds);

                console.log(items);

                for (let i = 0; i < list.length; i++) {
                    list[i].orderitems = items.filter(function (item) {
                        return list[i].id == item.goodsOrderId;
                    });
                }
                console.log(list);
                this.tableData = list;
                this.pageTotal = res.data.total;

                this.loading = false;
            });
        },
        getOrderItems: async function (orderIds) {
            var d = [];
            await axios({
                url: config.gatewayUrl + '/comorder/GoodsOrder/GetOrderItem',
                method: 'post',
                data: orderIds
            }).then(async (res) => {
                d = res.data;
            });
            return d;
        },
        expand(row, expandedRows) {},
        // 分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    }
};
</script>
